<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component One CollectionView Calculate Fields</title>
    <link href="../contents/bootstrap.min.css" rel="stylesheet"/>
    <link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>

    <script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>

    <style type="text/css">
        .calculated {
            background-color: azure;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div id="grid"></div>
        <span>current version not support calculatedFields in wijmo.collections.CollectionView</span>
    </div>

    <script type="text/javascript">
        document.readyState === "complete"?init():window.onload = init;

        function getData(){
            return [
                { product: 'Banana', brand: 'Chiquita', unitPrice: 45.95, qty: 12, discount: .08 },
                { product: 'Apple', brand: 'Granny', unitPrice: 65.95, qty: 23, discount: .02 },
                { product: 'Orange', brand: 'Sunkist', unitPrice: 52.95, qty: 16, discount: .04 },
                { product: 'Grape', brand: 'Pinot', unitPrice: 83.95, qty: 8, discount: .0 },
                { product: 'Watermelon', brand: '', unitPrice: 13.95, qty: 14, discount: .05 },
                { product: 'Mango', brand: 'Ganesh', unitPrice: 38.95, qty: 19, discount: .15 },
            ];
        }

        function getCalculatedView(){
            return new wijmo.collections.CollectionView(getData(),{
                calculatedFields:{
                    // function-based expressions
                    fullName: ($) => [$.brand, $.product].join(' '),
                    allCaps: ($) => $.fullName.toUpperCase(),
                    totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),
                    tax: ($) => $.totalPrice * 0.12,
                    // string-based expressions
                    fullNameStr: '[$.brand, $.product].join(" ")',
                    allCapsStr: '$.fullNameStr.toUpperCase()',
                    totalPriceStr: '($.unitPrice * $.qty) * (1 - $.discount)',
                    taxStr: '$.totalPriceStr * 0.12',
                }
            });
        }

        function init(){
            let grid = new wijmo.grid.FlexGrid("#grid", {
                alternatingRowStep:0,
                showMarquee:true,
                selectionMode:'MultiRange',
                autoGenerateColumns:false,
                columns:[
                    { binding: 'product', header: 'Product' },
                    { binding: 'brand', header: 'Brand' },
                    { binding: 'unitPrice', header: 'Unit Price', format: 'c' },
                    { binding: 'qty', header: 'Quantity', format: 'n0' },
                    { binding: 'discount', header: 'Discount', format: 'p0' },
                    // calculated fields
                    { binding: 'fullName', header: 'Full Name', cssClass: 'calculated' },
                    { binding: 'allCaps', header: 'Uppercase', cssClass: 'calculated' },
                    { binding: 'totalPrice', header: 'Total Price', format: 'c', cssClass: 'calculated' },
                    { binding: 'tax', header: 'Tax Amount', format: 'c', cssClass: 'calculated' }
                ],
                itemsSource:getCalculatedView()
            });
        }
    </script>
</body>
</html>